<template>
  <div
    class="progress-bar"
    :style="{ height: `${size}px`, background: bgColor }"
  >
    <div class="progress" :style="{ width: percentage + '%' }"></div>
  </div>
</template>

<script setup>
const { percentage, size } = defineProps({
  percentage: [Number,String],
  size: {
    default: 6,
    type: Number,
  },
  bgColor: {
    default: "#bcbcbc",
    type: String,
  },
});
</script>

<style lang="scss" scoped>
.progress-bar {
  width: 100%;
  position: relative;
  border-radius: 3px;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #c3ffe6 0%, #00fe96 100%);
  border-radius: 10px;
}

.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-weight: bold;
}
</style>